import React, { PureComponent } from "react";
import { View, FlatList, Text, StyleSheet, StatusBar, Image, ScrollView, TouchableOpacity, Alert } from "react-native";
import { width } from '../../../../../util/AdapterUtil'
import TopBar from "../../../../../components/topbar";
import myIcon from "../../../../../assets/images/my.png";
import styles from "./style"
import { safeAreaViewHeight } from '../../../../../util/AdapterUtil'
export default class SignCenterScreen extends PureComponent {
    constructor() {
        super();
        this.state = {
            data: [{ id: 1, day: '第1天', isSelect: true, image: "1" },
            { id: 2, day: '第2天', isSelect: false, image: "1" },
            { id: 3, day: '第3天', isSelect: false, image: "1" },
            { id: 4, day: '第4天', isSelect: false, image: "1" },
            { id: 5, day: '第5天', isSelect: false, image: "1" },
            { id: 6, day: '第6天', isSelect: false, image: "1" },
            { id: 7, day: '第7天', isSelect: false, image: "1" },
            { id: 8, day: '第8天', isSelect: false, image: "1" },
            { id: 9, day: '第9天', isSelect: false, image: "1" },
            { id: 10, day: '第10天', isSelect: false, image: "1" }]
        }
    }
    componentDidMount() {

    }

    _keyExtractor = (item, index) => item.id;

    render() {
        return (
            <View style={{ flex: 1, backgroundColor: "white" }}>
                <TopBar navigation={this.props.navigation} title="签到"
                    leftIsVisible={true}
                    rightIsVisible={true}
                    rightImage={myIcon}
                    _rightOnPress={this.collectionAction.bind(this)}></TopBar>
                <ScrollView>
                    <View style={styles.imageBackView}>
                        <Image
                            source={{ uri: 'https://facebook.github.io/react/logo-og.png' }}
                            style={{ width: 100, height: 100, borderRadius: 3 }}></Image>
                    </View>
                    <View style={styles.dayBackView}>
                        <FlatList
                            scrollEnabled={false}
                            style={{ backgroundColor: "#fff" }}
                            data={this.state.data}
                            keyExtractor={this._keyExtractor}
                            numColumns={5}
                            horizontal={false}
                            renderItem={({ item }) =>
                                <View style={{ width: (width - 60) / 5, height: (width - 60) / 5, justifyContent: "center", alignItems: "center", borderColor: "#ccc", borderLeftWidth: 1, borderTopWidth: 1 }} >
                                    <Text>{item.day}</Text>
                                </View>
                            } />
                    </View>
                    <TouchableOpacity onPress={this.signAction.bind(this)}>
                        <View style={styles.button}>
                            <Text style={styles.buttonText}>签到</Text>
                        </View>
                    </TouchableOpacity>
                    <Text style={[styles.titleStyle, { marginLeft: 10 }]}>签到规则</Text>
                    <FlatList
                        data={[
                            { key: '1. 完成每天的签到要求后可以进行签到；' },
                            { key: '2. 连续签到10天，共可以获得2000金豆；' },
                            { key: '3. 漏签或者签满一个周期，则累计签到天数将清零，重新计算。' },
                        ]}
                        renderItem={({ item }) => <Text style={styles.detailsStyle}>{item.key}</Text>}
                    />
                    <Text style={[styles.detailsStyle, { marginTop: 30 }]}>签到要求</Text>
                    <FlatList
                        data={[
                            { key: '第1天：无要求；' },
                            { key: '第2天：阅读1篇咨讯并获取奖励；' },
                            { key: '第3天：完成一个精选任务；' },
                            { key: '第4天：完成一个精选任务；' },
                            { key: '第5天：阅读1篇咨讯并获取奖励；' },
                            { key: '第6天：收1位徒弟；' },
                            { key: '第7天：完成一个精选任务；' },
                            { key: '第8天：阅读1篇咨讯并获取奖励；' },
                            { key: '第9天：完成一个精选任务；' },
                            { key: '第10天：完成一个精选任务。' },
                        ]}
                        renderItem={({ item }) => <Text style={styles.detailsStyle}>{item.key}</Text>}
                    />
                    <Text style={[styles.titleStyle, { marginTop: 30, marginLeft: 10 }]}>豆豆赚钱保留对活动的最终解释权</Text>
                </ScrollView>
                <View style={{ height: safeAreaViewHeight }} />
            </View>
        );
    }
    //右按钮事件
    collectionAction() {
        Alert.alert("你点击了按钮！");
    }

    sighToday() {

    }

    signAction() {

    }
}
